<template>
  <div class="demo">
    <div class="demo-title">事件</div>
    <div class="demo-content">
      <Slider v-model:value="value1" @after-change="onAfterChange" />
      <Slider v-model:value="value2" range :step="10" @after-change="onAfterChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Slider from '@sscd/slider';
  const value1 = ref<number>(30);
  const value2 = ref<[number, number]>([20, 50]);
  const onAfterChange = (value) => console.log('afterChange: ', value);
</script>

<style lang="less" scoped></style>
